<template>
<view>
	<cu-custom bgColor="bg-gradual-fff" isBack="true">
		<block slot="content">填写快递单号</block>
	</cu-custom>
	<loading-view v-show="showLoading"></loading-view>
	<view v-show="!showLoading">
		<view class="viewbox"></view>
		<view class="input_express_info_a">
			<view class="input_express_info_a_a">
				<view class="input_express_info_a_a_a">物流公司</view>
				<view class="input_express_info_a_a_b">
					<input class="input" placeholder="请输入物流公司名称" placeholder-style="color: #fff;" v-model="express"></input>
				</view>
			</view>
			<view class="input_express_info_a_a">
				<view class="input_express_info_a_a_a">快递单号</view>
				<view class="input_express_info_a_a_b">
					<input class="input" placeholder="请输入快递单号" v-model="number"></input>
				</view>
			</view>
			<view class="input_express_info_a_a">
				<view class="input_express_info_a_a_a">备注说明</view>
				<view class="input_express_info_a_a_b">
					<input class="input" placeholder="选填" v-model="remark"></input>
				</view>
			</view>
			<view class="input_express_info_a_a" style="height: auto;">
				<view class="input_express_info_a_a_a" style="width: 100%;float: none;height: auto;">上传凭证(请上传快递单号凭证）</view>
				<view class="input_express_info_a_a_b" style="width: 100%;float: none;height: auto;">
					<u-upload
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						uploadIconColor="#CCCCCC"
						name="1"
						multiple
						:maxCount="1"
					></u-upload>
				</view>
			</view>
		</view>
		<view class="apply_refund_b" @click="formSubmit()">提交</view>
	</view>
</view>
</template>

<script>
import request from '@/common/request.js';
export default {
  data() {
    return {
		fileList1: [],
		express: '',
		number: '',
		remark: '',
		uid:0
    };
  },

  components: {

  },
  props: {},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let {
      id
    } = options; // 售后id
    this.afterSalesId = id;
	this.uid=uni.getStorageSync('uid');
  },


  methods: {
	// 删除图片
	deletePic(event) {
		this[`fileList${event.name}`].splice(event.index, 1)
	},
	// 新增图片
	async afterRead(event) {
		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file)
		let fileListLen = this[`fileList${event.name}`].length
		lists.map((item) => {
			this[`fileList${event.name}`].push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
		for (let i = 0; i < lists.length; i++) {
			const result = await this.uploadFilePromise(lists[i].url)
			let item = this[`fileList${event.name}`][fileListLen]
			this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			}))
			fileListLen++
		}
	},
	uploadFilePromise(url) {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: request.baseUrl+'p-icon', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				success: (res) => {
					let data= JSON.parse(res.data);
					setTimeout(() => {
						resolve(data.data.base_url)
					}, 1000)
				}
			});
		})
	},

    formSubmit() {
      let {
        fileList1
      } = this;
      if (!this.express){
		  uni.showToast({
		      title:'请输入物流公司名称',
		  	icon:'none',
		      duration: 2000
		  });
		  return;
	  }
      if (!this.number){
		  uni.showToast({
		      title:'请填写快递单号',
		  	icon:'none',
		      duration: 2000
		  });
		  return;
	  }
      let paramsList = {
		uid:this.uid,
        id: this.afterSalesId,
        express_name: this.express,
        invoice_no: this.number,
        express_remark: this.remark,
        express_image: fileList1.length <= 0 ? '' : fileList1[0].url
      };
	  let optsList = {
	  	url: 'us-express',
	  	method: 'post'
	  };
	  let _this = this;
	  request.httpTokenRequest(optsList, paramsList).then(res => {
	  	if (res.data.code == 1) {
	  		uni.navigateBack();
	  		uni.$emit("refreshsale")
	  	}else{
			uni.showToast({
				title: res.data.msg,
				icon:'none',
				duration: 2000
			});
	  	}
	  });
    }
  }
};
</script>
<style>
	.input_express_info_a{
		box-shadow: inset 0 0 20rpx 20rpx rgba(85, 56, 105, 0.6);
		width: 710rpx;
		height: auto;
		border-radius: 20rpx;
		padding:40rpx;
		margin: auto;
		margin-top: 20rpx;
	}
	.input_express_info_a_a{
		height: 80rpx;
		width: 100%;
		margin-top: 10rpx;
	}
	.input_express_info_a_a_a{
		line-height: 80rpx;
		float: left;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #fff;
	}
	.input_express_info_a_a_b{
		width: 510rpx;
		height: 80rpx;
		line-height: 80rpx;
		float: right;
	}
	.input_express_info_a_a_b input{
		width: 510rpx;
		height: 80rpx;
		line-height: 80rpx;
		float: left;
		border-bottom: 1px solid #281D2D;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #fff;
	}
	.apply_refund_b{
		width: 580rpx;
		height: 88rpx;
		background:#62469B;
		border-radius: 44rpx;
		margin: auto;
		margin-top: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin-bottom: 40rpx;
	}
</style>